<template>
    <div class="chatC">
        <div class="title">
            <div class="searchline">
                <img style="height: 80%; margin-top: 1%;" src="search.png" />
                <input class="inputbox" type="text">
            </div>
            <div class="addbutton">
                +
            </div>
        </div>
            <div class="chatlistcontainer">
                <div v-for="item,key in props.chatList"  class="chatlistitem">
                    <div @click="select(key)"  class="itemcontainer" :style="key == props.currentSelect ? {backgroundColor:' rgb(195, 195, 196)'}:{}">
                        <div class="userprofile">
                            <!-- <div v-if="item.numsOfUnread !== 0" class="bubble">
                                {{ item.numsOfUnread }}
                            </div> -->
                        </div> 
                        <div class="usermsg">
                            <div class="nameandtime">
                                <div style="font-size: 20px; text-overflow: ellipsis;width: 120px;height: 25px;overflow: hidden;">{{item.friendName}}</div>
                                <div style="margin-left: auto;color: rgb(148, 148, 148);">{{ item.lastDate }}</div>
                            </div>
                            <div style="color: rgb(148, 148, 148); margin-top: 5px;overflow: hidden;height: 25px;text-overflow: ellipsis;">{{item.lastMessage}}</div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</template>
<script setup lang="ts">
import type { ChatUserInfo } from '@/types';
import {ref} from 'vue'

const emit = defineEmits<{
    (ev:'chatUserChange',index:number):void
}>()
const props = defineProps<{
    chatList:Array<ChatUserInfo>
    currentSelect:number
}>()

const select = (current:number) => {  
    emit('chatUserChange',current)
}
</script>
<style scoped>
.searchline {
    height: 33px;
    width: 238px;
    background-color: rgb(226, 226, 226);
    border-radius: 8px;
    margin-left: 18px;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}
.inputbox {
    outline:none;
    height: 31px;
    width: 238px;
    font-size: 15px;
    line-height: 33px; 
    border: 0px;
    border-radius: 0 8px 8px 0;
    background-color: rgb(226, 226, 226);
}
.addbutton {
    height: 33px;
    width: 33px;
    background-color: rgb(226, 226, 226);
    border-radius: 8px;
    margin-top: 30px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 33px;
    line-height: 33px;
    text-align: center;
}
.addbutton:hover{
    background-color: rgb(215, 199, 179);
}
.chatC {
    width: 313px;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.chatlistcontainer{
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
}
.title {
    height: 80px;
    background-color: rgb(243, 243, 243);
    display: flex;
    flex-direction: row;
}
.chatlistitem{
    min-height: 80px;
 
    /* padding: 10px; */
    background-color: rgb(230, 229, 228);
}
.chatlistitem:hover{
    background-color: rgb(220, 218, 217);
}
.itemcontainer {
    height: 100%;
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
    align-items: center;
    cursor: pointer;

}
.userprofile{
    height: 50px;
    width: 50px;
    background-color: black;
    margin-left: 20px;
    position: relative;
}
.usermsg {
    height: 50px;
    width: 210px;
    margin-left: 5px;
    margin-right: 10px;
}
.nameandtime{
    display: flex;
    flex-direction: row;
}

.bubble {
    height: 20px;
    width: 20px;
    background-color: red;
    position: absolute;
    border-radius: 20px;
    left: 80%;
    bottom: 88%;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    color: white;
}
</style>